<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>扩展选择器</title>
    <style>
        div p{
            color: blue;
        }

        div > p{
            border: 1px solid;
        }

        input[type='text']{
            border: 5px solid;
        }

        a:link{
            color: blue;
        }
        a:visited{
            color: green;
        }
        a:active{
            color: red;
        }
        a:hover{
            color: aquamarine;
        }
    </style>
</head>
<body>
      <!--扩展选择器
         1:选择所有元素:
           *语法:  *{}

         2:并集选择器:[常用]
            *语法: 选择器1,选择器2{}

         3:子选择器:筛选选择器1元素下的选择器2元素[常用]
            *语法: 选择器1 选择器2{}

         4:父选择器:筛选选择器2的父元素选择器1
            *语法: 选择器1 > 选择器2{}

         5:属性选择器: 选择元素名称
            *语法: 元素名称[属性名='属性值']{}

         6: 伪类选择器:选择一些元素具有的状态
              *语法: 元素:状态{}
                如:<a>
                  *状态:
                      *link:初始化状态
                      *visited:被访问过的状态
                      *active:正在被访问状态
                      *hover:鼠标悬浮状态

                -->
     <div>
         <p>光头强</p>
     </div>
      <p>熊大</p>
     <div>熊二</div>

    <input type="text">
    <input type="password">
  <br>
   <a href="#">点击</a>
</body>
</html>